<!-- 
    --评论列表组件
    --"userId":1,
    --"relatedEntityType":1,
    --"relatedEntityId":10  均来自父组件
-->
<template>
  <div class="commentLists">
    <el-container v-for="l in list" :key="l.comments.commentId">
      <el-aside class="img" style="width: 30%; padding: 50px">
        <img
          :src="l.pictures.picLink"
          alt="用户头像"
          style="width: 100%; height: 100%"
        />
      </el-aside>
      <el-main>
        <el-header>
          <el-row style="font-size: 30px">
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                {{ l.shopName }}
              </div></el-col
            >
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                用户：{{ l.users.userName }}
              </div></el-col
            >
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                {{ l.formattedTime }}
              </div></el-col
            >
          </el-row>
        </el-header>
        评分：
        <el-rate
          v-model="l.comments.commentRating"
          disabled
          show-score
          text-color="#ff9900"
        >
        </el-rate>
        <br />
        评价：
        <br />
        {{ l.comments.comment }}
        <div style="float: right" v-if="flag">
          <el-button type="primary" plain @click="deleteComment(l.comments.commentId)"
            >删除评论</el-button
          >
          <el-button type="primary" plain @click="go(l.comments)"
            >查看服务详情</el-button
          >
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "commentlists",
  props: {
    comment: Object,
  },
  data() {
    return {
      // 请求参数
      pageDto: {
        comments: {},
      },
      // 结果集
      list: [],
      //   其他参数
      flag: true,
    };
  },
  methods: {
    // 组件传值
    getParams() {
      // 由于详细页不能重定向且不需要userId，所以作此控制
      if (this.comment) {
        this.pageDto.comments.relatedEntityType =
          this.comment.relatedEntityType;
        this.pageDto.comments.relatedEntityId = this.comment.relatedEntityId;
        this.flag = this.comment.flag;
        // console.log(this.comment);//this.propName又可以获取父组件参数了
        // console.log(this.pageDto.comments);
      }
      // 指定用户的评论
      else {
        this.pageDto.comments.userId = localStorage.getItem("USERID");
      }
    },
    // 请求参数
    queryCommentsByPage() {
      this.$api.commentsApi.queryCommentsByPage(this.pageDto).then((res) => {
        if (res.data.code == 0) {
          this.$emit("has-data", []);
        } else this.list = res.data.data.list;
        // console.log(this.list);
      });
    },
    // 评论关联实体详情页跳转
    go(com) {
      //景区
      if (com.relatedEntityType == 1) {
        this.$router.push({
          name: "landmarkdetail",
          params: { id: com.relatedEntityId },
        });
      }
      //套餐
      else if (com.relatedEntityType == 2) {
        this.$router.push({
          name: "packagedetail",
          params: { id: com.relatedEntityId },
        });
      }
      //酒店
      else if (com.relatedEntityType == 3) {
        this.$router.push({
          name: "hoteldetail",
          params: { id: com.relatedEntityId },
        });
      }
    },
    // 删评
    deleteComment(id){
      this.$api.commentsApi.deleteComment({commentId:id}).then(res=>{
        if(res.data.code == 1){
              this.$notify({
              title: "成功",
              message: "删评成功，您可以在“我的订单”中找到详细订单重新评论！",
              type: "success",
            });
            this.queryCommentsByPage();
            }else{
              this.$notify.error({
              title: "错误",
              message: "删评失败！",
            });
            }
      })
    },
  },
  mounted() {
    this.getParams();
    this.queryCommentsByPage();
  },
};
</script>

<style scoped></style>
